<template xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
        <!-- 左侧 -->
        <div class="left">
            <div class="put">
                <el-input placeholder="请输入PLC名称" v-model="plc_name" prefix-icon="el-icon-search"
                    @change="getPLCName($event)" clearable></el-input>
            </div>
            <div class="table">
                <el-table :data="plcList" @row-click="handleSelectionChange" height="100%"
                    :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                    :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '13px', 'text-align': 'left' }"
                    :row-style="{ height: '40px', background: '#000224', width: '100%', fontSize: '13px', color: '#bdbdc2', 'text-align': 'left' }"
                    :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="plc_name" label="名称" width="70%">
                        <template slot-scope="scope">
                            <div
                                style="font-size: 12px;display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: left;">
                                <div v-if="scope.$index + 1 == 1"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#a64317; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 == 2"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#a67c17; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 == 3"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#9aa617; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 >= 4"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#64a617; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <p>{{ scope.row.plc_name }}_{{ scope.row.robot_name }}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="plc_state" label="状态" width="30%">
                        <template slot-scope="scope">
                            <i class="el-icon-error" v-if="scope.row.plc_state === 0"
                                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                            <i class="el-icon-success" v-else
                                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
            <!-- 头部 -->
            <div> <!--div class="right-header">-->
                <p style=" width: 211px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;" id="plctitle">PLC操作面板</p>
            </div>
            <!-- 显示参数 -->
            <div class="right-center">
                <div class="right-title">
                    <p>显示参数</p>
                    <span></span>
                </div>
                <div class="right-conter">
                    <div class="centerBox">
                        <div class="centerBox1">
                            <p>1#充电桩到位信号</p>
                            <p>{{ cdzdwxh1 }}</p>
                        </div>
                        <div class="centerBox1">
                            <p>2#充电桩到位信号</p>
                            <p>{{ cdzdwxh2 }}</p>
                        </div>
                    </div>
                    <div class="centerBox">
                        <div class="centerBox1">
                            <p>1#电动门关到位</p>
                            <p style="color: #e85e09">{{ ddmgdw }}</p>
                        </div>
                        <div class="centerBox1">
                            <p>2#电动门关到位</p>
                            <p style="color: #e85e09">{{ ddmgdw2 }}</p>
                        </div>
                    </div>
                    <div class="centerBox">
                        <div class="centerBox1">
                            <p>1#电动门开到位</p>
                            <p style="color: #e85e09">{{ ddmkdw }}</p>
                        </div>
                        <div class="centerBox1">
                            <p>2#电动门开到位</p>
                            <p style="color: #e85e09">{{ ddmkdw2 }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 公共操作 -->
            <div class="right-bottom">
                <div class="bottom-title">
                    <p>公共操作</p>
                    <span></span>
                </div>
                <div class="bottom-center">
                    <div class="bottom-centerBox2" v-hasPermi="['robot:bg:view']">
                        <div class="centerBox-bg">
                            <p>1#电动门</p>
                            <span></span>
                        </div>
                        <div class="bg-btn">
                            <el-button class="bg-btn1" size="mini" @click="bzg()">电动门(开)</el-button>
                            <el-button class="bg-btn2" size="mini" @click="bwg()">电动门(关)</el-button>
                            <el-button class="bg-btn3" size="mini" @click="bgtz()">电动门(停止)</el-button>
                        </div>
                    </div>
                    <div class="bottom-centerBox3" v-hasPermi="['robot:ddm:view']">
                        <div class="centerBox-ddm">
                            <p>2#电动门</p>
                            <span></span>
                        </div>
                        <div class="ddm-btn">
                            <el-button class="ddm-btn1" size="mini" @click="ddmk()">电动门(开)</el-button>
                            <el-button class="ddm-btn2" size="mini" @click="ddmg()">电动门(关)</el-button>
                            <el-button class="ddm-btn3" size="mini" @click="ddmzt()">电动门(停止)</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { listsPlc } from "@/api/robot/plc/plc";
import {
    bgtzCmd,
    bwgCmd,
    bzgCmd,
    ddmkCmd,
    ddmztCmd,
    dmgCmd,
    plcdataCmd,
    sjjjCmd,
    sjjsCmd,
    sjjtzCmd
} from "@/api/robot/modbus/modbus";
import $ from "jquery";
export default {
    data() {
        return {
            timer: null,//定时器
            plc_name: undefined,
            //控制机器人的滚动条
            isDologin: false,
            tsjsxw: '无',//提升装置上限位
            cdzdwxh1: '无',//充电桩机器人到位信号1
            cdzdwxh2: '无',//充电桩机器人到位信号2
            tsjjqrdwxh1: '无',//提升装置到位信号1
            tsjjqrdwxh2: '无',//提升装置到位信号2
            zgdwxh: '无',//变轨装置直轨到位信号
            wgdwxh: '无',//变轨装置弯轨到位信号
            tsjthsk: '无',//弹簧松开检测
            tsjssux: '无',//提升机上升运行
            tsjssdw1: '无',//提升装置轨道到位1（上升到位）
            tsjxjdw2: '无',//提升装置轨道到位2（下降到位）
            tsjxjyx: '无',//提升机下降运行
            ddmkdw: '无',//电动门开到位
            ddmgdw: '无',//电动门关到位
            ddmkdw2: '无',//电动门开到位
            ddmgdw2: '无',//电动门关到位
            dydyqdgd1: '无',//1#AP电源启动供电
            dydyqdgd2: '无',//2#AP电源启动供电
            dytzgd1: '无',//1#AP电源停止供电
            dytzgd2: '无',//2#AP电源停止供电
            ddmtz: '无',//电动门停止
            ddmtz2: '无',//电动门停止
            tsjtz: '无',//提升机停止
            //plc列表数据
            plcList: [],
            queryParams: {
                plc_name: undefined
            },
            queryParams1: {
                plcid: undefined
            }
        }
    },
    created() {
        //初始化页面加载方法
        this.getList(); //plc列表
        this.plcreadata();//plc实时数据
    },
    beforeDestroy() {
        //清除定时器
        if (this.timer) {
            clearInterval(this.timer); //关闭
        }
    },
    mounted() {
        //加载完页面加载方法
        $("#plctitle").text(localStorage.getItem("plc_title") == null ? "PLC面板" : localStorage.getItem("plc_title"));//plc标题
        //定时器轮询程序
        this.timer = setInterval(() => {
            this.plcreadata();//plc实时数据
            this.getList(); //plc列表
        }, 2000);//2000毫秒
    },
    methods: {
        /** 根据输入框plc名称，查询plc列表 */
        getPLCName(plc_name) {
            this.queryParams.plc_name = plc_name;
            this.getList();
        },
        /** 查询plc列表 */
        getList() {
            this.loading = true;
            listsPlc(this.queryParams).then(response => {
                this.plcList = response.rows;
            });
        },
        //根据当前plc查询plc数据
        handleSelectionChange(row) {
            localStorage.removeItem("plcid");//删除
            localStorage.removeItem("plc_title");//删除
            localStorage.setItem("plcid", row.robot_config_id + "_" + row.plc_num);//存储plcid
            localStorage.setItem("plc_title", row.plc_name + '_' + row.robot_name + '面板 ');//存储pic标题
            $("#plctitle").text(localStorage.getItem("plc_title"));//plc名称标题
        },
        enter() {
            this.isDologin = true;
        },
        leave() {
            this.isDologin = false;
        },
        // 定时刷新plc实时数据
        plcreadata() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            if (typeof (this.queryParams1.plcid) != "undefined" && this.queryParams1.plcid != null && this.queryParams1.plcid != "") {
                plcdataCmd(this.queryParams1).then(response => {
                    if (typeof response.data != "undefined" && response.data != null) {
                        this.tsjsxw = "---"; //提升装置上限位
                        this.cdzdwxh1 = response.data.cdzdwxh1; //充电桩机器人到位信号1
                        this.cdzdwxh2 = response.data.cdzdwxh2; //充电桩机器人到位信号2
                        this.tsjjqrdwxh1 = response.data.tsjjqrdwxh1; //提升装置到位信号1
                        this.tsjjqrdwxh2 = response.data.tsjjqrdwxh2; //提升装置到位信号2
                        this.zgdwxh = "---"; //变轨装置直轨到位信号
                        this.wgdwxh = "---"; //变轨装置弯轨到位信号
                        this.tsjthsk = "---";//弹簧松开检测
                        this.tsjssux = response.data.tsjssux;//提升机上升运行
                        this.tsjssdw1 = response.data.tsjssdw1;//提升装置轨道到位1（上升到位）
                        this.tsjxjdw2 = response.data.tsjxjdw2;//提升装置轨道到位2（下降到位）
                        this.tsjxjyx = response.data.tsjxjyx;//提升机下降运行
                        this.ddmkdw = response.data.ddmkdw;//电动门开到位
                        this.ddmgdw = response.data.ddmgdw;//电动门关到位
                        this.ddmkdw2 = response.data.ddmkdw2;//电动门开到位
                        this.ddmgdw2 = response.data.ddmgdw2;//电动门关到位
                        this.dydyqdgd1 = response.data.dydyqdgd1;//1#AP电源启动供电
                        this.dydyqdgd2 = response.data.dydyqdgd2;//2#AP电源启动供电
                        this.dytzgd1 = response.data.dytzgd1;//1#AP电源停止供电
                        this.dytzgd2 = response.data.dytzgd2;//2#AP电源停止供电
                        this.ddmtz = "---";//电动门停止
                        this.ddmtz2 = "---";//电动门停止
                        this.tsjtz = "---";//提升机停止
                    } else {
                        this.tsjsxw = "无"; //提升装置上限位
                        this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
                        this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
                        this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
                        this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
                        this.zgdwxh = "无"; //变轨装置直轨到位信号
                        this.wgdwxh = "无"; //变轨装置弯轨到位信号
                        this.tsjthsk = "无";//弹簧松开检测
                        this.tsjssux = "无";//提升机上升运行
                        this.tsjssdw1 = "无";//提升装置轨道到位1（上升到位）
                        this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
                        this.tsjxjyx = "无";//提升机下降运行
                        this.ddmkdw = "无";//电动门开到位
                        this.ddmgdw = "无";//电动门关到位
                        this.ddmkdw2 = "无";//电动门开到位
                        this.ddmgdw2 = "无";//电动门关到位
                        this.dydyqdgd1 = "无";//1#AP电源启动供电
                        this.dydyqdgd2 = "无";//2#AP电源启动供电
                        this.dytzgd1 = "无";//1#AP电源停止供电
                        this.dytzgd2 = "无";//2#AP电源停止供电
                        this.ddmtz = "无";//电动门停止
                        this.ddmtz2 = "无";//电动门停止
                        this.tsjtz = "无";//提升机停止
                    }
                });
            } else {
                this.tsjsxw = "无"; //提升装置上限位
                this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
                this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
                this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
                this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
                this.zgdwxh = "无"; //变轨装置直轨到位信号
                this.wgdwxh = "无"; //变轨装置弯轨到位信号
                this.tsjthsk = "无";//弹簧松开检测
                this.tsjssux = "无";//提升机上升运行
                this.tsjssdw1 = "无";//提升装置轨道到位1（上升到位）
                this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
                this.tsjxjyx = "无";//提升机下降运行
                this.ddmkdw = "无";//电动门开到位
                this.ddmgdw = "无";//电动门关到位
                this.ddmkdw2 = "无";//电动门开到位
                this.ddmgdw2 = "无";//电动门关到位
                this.dydyqdgd1 = "无";//1#AP电源启动供电
                this.dydyqdgd2 = "无";//2#AP电源启动供电
                this.dytzgd1 = "无";//1#AP电源停止供电
                this.dytzgd2 = "无";//2#AP电源停止供电
                this.ddmtz = "无";//电动门停止
                this.ddmtz2 = "无";//电动门停止
                this.tsjtz = "无";//提升机停止
            }
        },//提升机(升)
        tsjs() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            sjjsCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//提升机(降)
        tsjj() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            sjjjCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //电动门开
        ddmk() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            ddmkCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//电动门关
        ddmg() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            dmgCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //变直轨
        bzg() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            bzgCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //变弯轨
        bwg() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            bwgCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//电动门暂停
        ddmzt() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            ddmztCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }, //提升机(停止)
        tsjzt() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            sjjtzCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },//变轨停止
        bgtz() {
            this.queryParams1.plcid = localStorage.getItem("plcid");
            bgtzCmd(this.queryParams1).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    width: 100%;
    height: calc(100vh - 35px);
    background: #081a46;
    display: flex;
    justify-content: space-between;
}

* {
    margin: 0;
    //padding: 0;
}

.el-button+.el-button {
    margin-left: 0px;
}

.left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .put {
        width: 98%;
        margin: 10px;

        ::v-deep .el-input {
            width: 100%;
            height: 20px;
        }

        ::v-deep .el-input__inner {
            border: 2px solid #0264bf;
            background-color: #081a46;
            // margin: 10px;
        }
    }

    .table {
        width: 98%;
        height: 200px;
        margin: 10px;
        // margin-top: 20px;
        overflow: auto;

        ::v-deep .el-table__body-wrapper {
            &::-webkit-scrollbar {
                // 整个滚动条
                width: 0px; // 纵向滚动条的宽度
                background: rgba(71, 103, 182, 0.3);
                border: none;
            }

            &::-webkit-scrollbar-track {
                // 滚动条轨道
                border: none;
            }
        }

        .el-table {
            width: 100%;
        }

        ::v-deep .el-table th.gutter {
            display: none;
            width: 0
        }

        ::v-deep .el-table colgroup col[name='gutter'] {
            display: none;
            width: 0;
        }

        ::v-deep .el-table__body {
            width: 100%;
            background-color: #081a46;
            // padding-left: 10px;
        }

        ::v-deep .el-table__body-wrapper {
            width: 100%;
            background-color: #081a46;
        }

        /*滚动条的宽度*/
        .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            width: 0;
        }

        ::v-deep .el-table tr {
            //background-color: transparent;
            border: none;
            // height: 50px;
            width: 100%;
            background-color: #081a46;
        }

        ::v-deep .el-table td {
            //background-color: trannt;
            border: none;
            width: 100%;
            // height: 50px;
            background-color: #081a46;
        }

        // /* 表格内背景颜色 */
        ::v-deep .el-table th {
            background-color: transparent;
            border: none;
            width: 100%;
        }

        // 移入变色
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #222448;
        }
    }

    ::v-deep.el-progress-bar__inner {
        background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
        // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
        // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
        // background: linear-gradient(to right, red, blue 70px);
        // stroke-linecap:butt
    }

    .table::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
    }
}

.right {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .right-header {
        width: 98%;
        height: 65px;
        border: 1px solid #2A2E4A;
        border-radius: 4px;
        border-top: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #081a46;

        >p {
            width: 211px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;
        }
    }

    .right-center {
        width: 98%;
        padding: 0%;
        height: 36%;
        margin-top: 1%;
        border: 1px solid #262E63;
        border-radius: 4px;

        .right-title {
            width: 98%;
            margin-left: 2%;
            //margin-bottom: 10px;
            margin-top: 10px;

            >p {
                width: 86px;
                height: 22px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 2px;
            }

            span {
                width: 45px;
                height: 3px;
                margin-left: 1%;
                display: block;
                background: #4691FF;
                border-radius: 2px;
                // margin-bottom: 20px;
            }
        }

        .right-conter {
            width: 98%;
            height: 75%;
            margin-top: 15px;
            display: flex;
            justify-content: center;
            align-items: center;

            .centerBox {
                //padding-left: 2%;
                width: 86%;
                //padding: 0%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                //background-color: #108B8F;
                //border: 1px solid #ffff;
                margin-bottom: 30px;

                .centerBox1 {
                    width: 100%;
                    // padding: -30px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    margin-bottom: 10px;

                    //background-color: #22c2a4;
                    // background-color: #bfc1eb;
                    p:nth-child(1) {
                        //margin-top: 10px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        width: 107px;
                        height: 17px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        margin-right: 2px;
                    }

                    p:nth-child(2) {
                        width: 50px;
                        height: 24px;
                        //margin-left: 2%;
                        background: #0F1A43;
                        border: 2px solid #54619D;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #75bfff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }

    .right-bottom {
        width: 98%;
        height: 60%;
        border: 1px solid #262E63;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;

        .bottom-title {
            width: 98%;
            height: 10%;
            margin-left: 2%;
            margin-top: 1%;

            >p {
                width: 86px;
                height: 22px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 2px;
            }

            span {
                width: 45px;
                height: 3px;
                margin-left: 1%;
                display: block;
                background: #4691FF;
                border-radius: 2px;
                margin-bottom: 20px;
            }
        }

        .bottom-center {
            width: 98%;
            height: 80%;
            margin-left: 2%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .bottom-centerBox1 {
                width: 260px;
                height: 99%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .centerBox-sjj {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;

                    >p {
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }

                    span {
                        width: 42px;
                        height: 3px;
                        display: block;
                        background: #4691FF;
                        border-radius: 1px;
                    }
                }

                .sjj-btn {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;

                    .sjj-btn1 {
                        width: 120px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }

                    .sjj-btn2 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 8%;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }

                    .sjj-btn3 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }

            .bottom-centerBox2 {
                width: 260px;
                height: 99%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .centerBox-bg {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;

                    >p {
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }

                    span {
                        width: 42px;
                        height: 3px;
                        display: block;
                        background: #de7018;
                        border-radius: 1px;
                    }
                }

                .bg-btn {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;

                    .bg-btn1 {
                        width: 120px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }

                    .bg-btn2 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 8%;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }

                    .bg-btn3 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }

            .bottom-centerBox3 {
                width: 260px;
                height: 99%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .centerBox-ddm {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;

                    >p {
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }

                    span {
                        width: 40px;
                        height: 3px;
                        display: block;
                        background: #22c2a4;
                        border-radius: 1px;
                    }
                }

                .ddm-btn {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;

                    .ddm-btn1 {
                        width: 120px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }

                    .ddm-btn2 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 8%;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }

                    .ddm-btn3 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }

            .bottom-centerBox4 {
                width: 260px;
                height: 100%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .centerBox-dy {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;

                    >p {
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }

                    span {
                        width: 30px;
                        height: 3px;
                        display: block;
                        background: #3152c1;
                        border-radius: 1px;
                    }
                }

                .dy-btn {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;

                    .dy-btn1 {
                        width: 100px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }

                    .dy-btn2 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }

                    .dy-btn3 {
                        width: 100px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }

                    .dy-btn4 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }
        }
    }
}
</style>
